﻿@page "/tooltip"
@page "/docs/guides/components/tooltip.html"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Tooltip
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    The <strong>Tooltip</strong> component is a small pop-up box that appears when the user hovers or clicks on a UI element. It is commonly used to provide additional information or context to the user.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    These demos showcase tooltips using <code>TooltipService</code> with string messages or HTML content, customizable positions (left/right/top/bottom), configurable delay and duration timing, close-on-page-click behavior, and attachment to both Radzen components and HTML elements.
</RadzenText>

<HelpPrerequirements />

<RadzenText Anchor="tooltip#tooltip-string-message" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Show tooltip with string message
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Show string message tooltip when the user hovers a Radzen component.
</RadzenText>
<RadzenExample ComponentName="Tooltip" Example="TooltipString">
    <TooltipString />
</RadzenExample>

<RadzenText Anchor="tooltip#tooltip-positions" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Tooltip positions
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Place the Tooltip to the left, right, top, or bottom of a component.
</RadzenText>
<RadzenExample ComponentName="Tooltip" Example="TooltipPositions">
    <TooltipPositions />
</RadzenExample>

<RadzenText Anchor="tooltip#tooltip-html-content" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Show tooltip with HTML content
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Show HTML content tooltip when the user hovers a Radzen component.
</RadzenText>
<RadzenExample ComponentName="Tooltip" Example="TooltipHTMLContent">
    <TooltipHTMLContent />
</RadzenExample>

<RadzenText Anchor="tooltip#tooltip-delay-duration" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Tooltip delay and duration
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Show tooltip with delay when the user hovers a component and close it after 5 seconds.
</RadzenText>
<RadzenExample ComponentName="Tooltip" Example="TooltipDelayDuration">
    <TooltipDelayDuration />
</RadzenExample>

<RadzenText Anchor="tooltip#tooltip-close-on-page-click" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Close Tooltip on page click
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Show styled tooltip on button click and close it on page click.
</RadzenText>
<RadzenExample ComponentName="Tooltip" Example="TooltipClose">
    <TooltipClose />
</RadzenExample>

<RadzenText Anchor="tooltip#tooltip-html-element" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Tooltip on HTML element
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Show string message tooltip when the user hovers an HTML element.
</RadzenText>
<RadzenExample ComponentName="Tooltip" Example="TooltipHTMLElement">
    <TooltipHTMLElement />
</RadzenExample>
